<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行业管理</title>
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.ttf">
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.woff">
    <link rel="stylesheet" href="../elementui-2.15.6/icon.css">
    <link rel="stylesheet" href="../elementui-2.15.6/elmentui.css">
    <link rel="stylesheet" href="../common.css">
    <link rel="stylesheet" href="./scss/index.css">
    <script src='../vue-2.6.12.js'></script>
    <script src='../elementui-2.15.6/elementui.js'></script>
</head>

<body>
    <div class="zl-industry-manage" id="zl-industry-manage-box">
        <div class="zl-industry-manage-main" >
            <div class="zl-industry-manage-search">
                <div class="left-btn">
                </div>
                <div class="right-btn">
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="addIndustry(1)">新增行业
                    </el-button>
                </div>
            </div>
            <div class="zl-industry-manage-table">
                <el-table :data="tableData" style="width: 200%" ref="multipleTable" @selection-change="selectionChange"
                    >
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <template v-for="(item, index) in tableHeader">
                        <el-table-column :prop="item.key" :label="item.label" v-if="item.key !== 'op'" :key="index"
                            :min-width="item.minWidth" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span v-if="item.slot">
                                    {{scope.row[item.key] ? scope.row[item.key] : '-'}}
                                </span>
                                <span v-else>{{scope.row[item.key]}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column v-else label="操作" align="center" width="220">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="addIndustry(3, scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="deleteRow(scope.row)">删除</el-button>
                                <el-button 
                                    type="text" 
                                    size="small" 
                                    @click="addIndustry(2, scope.row)" 
                                    :disabled="scope.row.sshy !== ''">
                                    添加子行业
                                </el-button>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageData.currentPage" :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageData.pageSize" layout="total, prev, pager, next, sizes" :total="pageData.total">
                </el-pagination>
            </div>
        </div>

        <!-- 新增、编辑行业 -->
        <el-dialog :title="title" custom-class="zl-add-industry-dialog" :visible.sync="dialogVisible" width="40%">
            <el-form :model="industryForm" ref="industryForm">
                <el-form-item label="所属行业：">
                    <el-select v-model="industryForm.sshy" placeholder="请选择所属行业">
                        <el-option v-for="item in sshyList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="行业名称：">
                    <el-input v-model="industryForm.hymc" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="行业描述：" prop="hyms">
                    <el-input v-model="industryForm.hyms" type="textarea" placeholder="" rows="3"
                        :disabled="addType === 1"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button type="primary" @click="saveData">确认提交</el-button>
            </div>
        </el-dialog>
    </div>

    <script>
        new Vue({
            el: '#zl-industry-manage-box',
            data() {
                return {
                    dialogVisible: false,
                    tableHeader: [
                        { label: '行业', key: 'hymc', minWidth: '12%' },
                        { label: '所属行业', key: 'sshy', minWidth: '12%',slot: true },
                        { label: '行业描述', key: 'hyms', minWidth: '60%' },
                        { label: '操作', key: 'op', width: '220' }
                    ],
                    tableData: [
                        {
                            hymc: '金融', sshy: '', hyms: '我是行业描述我是行业描述我是行业描述我是行业描述我是行业描述我是行业描述'
                        },
                        {
                            hymc: '电信', sshy: '', hyms: '我是行业描述我是行业描述我是行业描述我是行业描述我是行业描述我是行业描述'
                        },
                        {
                            hymc: '设备', sshy: '电信', hyms: '我是行业描述我是行业描述我是行业描述我是行业描述我是行业描述我是行业描述'
                        }
                    ],
                    pageData: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 0
                    },
                    selectList: [],
                    sshyList: [
                        { label: '电信', value: '1' },
                        { label: '金融', value: '2' },
                        { label: '制造', value: '3' },
                        { label: '政府', value: '4' },
                        { label: '能源', value: '5' },
                        { label: '交通', value: '6' },
                        { label: '教育', value: '7' },
                        { label: '其他', value: '8' },
                    ],
                    industryForm: {
                        sshy: '',
                        hymc: '',
                        hyms: '',
                    },
                    addType: 1,
                    title: '新增行业'
                }
            },
            methods: {
                selectionChange(selection) {
                    this.selectList = selection;
                },
                // 初始化数据
                initData(){},
                addIndustry(type, data) {
                    // 设置对话框标题
                    this.title = type === 1 ? '新增行业' : type === 2 ? '新增子行业' : '编辑行业'
                    // 先清空
                    this.industryForm = {
                        sshy: '',
                        hymc: '',
                        hyms: '',
                    }
                    this.addType = type;
                    // 编辑时赋值
                    if (type === 3 && data) this.industryForm = data
                    this.dialogVisible = true;
                },
                // 删除
                deleteRow(data) {
                    this.$confirm('确认删除本条数据?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        console.log('点击确定')
                    }).catch(() => {
                    });
                },
                // 提交数据
                saveData() {
                    if (this.addType === 2 && this.industryForm.hyms === '') {
                        this.$message.warning('请填写行业描述！')
                        return;
                    }
                    this.dialogVisible = false;
                },
                // 切换每页展示数量
                handleSizeChange(size) {
                    console.log(size)
                    this.initData()
                },
                // 切换页码
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.initData()
                }
            }
        })
    </script>
</body>

</html>